<template>
    <div style="margin-left: 180px;padding-top: 15px;background-color: white;width: 1175px;">
        <div style="background-color: #006bb7;height: 50px;line-height:50px">
            <span style="color: white;font-size: 20px;margin-left: 20px;">LPL赛区</span>
        </div>
        <div style="background-color: white;margin-top: 10px;">
            <el-row :gutter="20">         
                <el-col :span="8" v-for="(item) in lplClueList" :key="item.id"  style="height: 130px;width: 390px;">                
                    <div style="display: flex;margin-left: 15px;">                                        
                        <img v-if="item.photo" :src="item.photo" class="avatar" width="80px">         
                        <div style="margin-left: 30px;margin-top: 10px;">
                            <div>
                                <span style="font-size: 20px;">{{ item.name }}</span>
                            </div>
                            <div style="margin-top: 10px;">
                                <span style="font-size: 10px;">{{ item.boss }}</span>
                            </div>
                        </div>          
                    </div>            
                </el-col>        
            </el-row>
        </div>
        <div style="background-color: #006bb7;height: 50px;line-height:50px">
            <span style="color: white;font-size: 20px;margin-left: 20px;">LCK赛区</span>
        </div>
        <div style="background-color: white;margin-top: 10px;">
            <el-row :gutter="20">         
                <el-col :span="8" v-for="(item) in lckClueList" :key="item.id"  style="height: 130px;">                
                    <div style="display: flex;margin-left: 15px;">                                        
                        <img v-if="item.photo" :src="item.photo" class="avatar" width="80px">         
                        <div style="margin-left: 30px;margin-top: 10px;">
                            <div>
                                <span style="font-size: 20px;">{{ item.name }}</span>
                            </div>
                            <div style="margin-top: 10px;">
                                <span style="font-size: 10px;">{{ item.boss }}</span>
                            </div>
                        </div>          
                    </div>            
                </el-col>        
            </el-row>
        </div>
        <div style="background-color: #006bb7;height: 50px;line-height:50px">
            <span style="color: white;font-size: 20px;margin-left: 20px;">其他赛区</span>
        </div>
        <div style="background-color: white;margin-top: 10px;">
            <el-row :gutter="20">         
                <el-col :span="8" v-for="(item) in otherZoneClueList" :key="item.id"  style="height: 130px;">                
                    <div style="display: flex;margin-left: 15px;">                                        
                        <img v-if="item.photo" :src="item.photo" class="avatar" width="80px">         
                        <div style="margin-left: 30px;margin-top: 10px;">
                            <div>
                                <span style="font-size: 20px;">{{ item.name }}</span>
                            </div>
                            <div style="margin-top: 10px;">
                                <span style="font-size: 10px;">{{ item.boss }}</span>
                            </div>
                        </div>           
                    </div>            
                </el-col>        
            </el-row>
        </div>
        
        
    </div>
</template>

<script>
import clueApi from "@/api/clue/clue";
export default {
    data() {
        return {
            lplClueList: [],
            lckClueList: [],
            otherZoneClueList: [],
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData(){
            clueApi.getLplClue()
            .then(response => {
                this.lplClueList = response.data
                console.log(this.lplClueList)
            })
            clueApi.getLckClue()
            .then(response => {
                this.lckClueList = response.data
            })
            clueApi.getOtherZoneClue()
            .then(response => {
                this.otherZoneClueList = response.data
            })
        }
    },
}
</script>

<style>
#app{
    background: rgb(246, 246, 246);
    height: 100%;
    overflow: scroll;
  }
</style>